import React, { useState, useEffect } from 'react';
import './App.css';
import WaveSurfer from "wavesurfer.js";
import SpectrogramPlugin from "wavesurfer.js/dist/plugin/wavesurfer.spectrogram"
import Colormap from "colormap"
import wav from "./static/35kHz.wav" //随便找个MP3文件
import mp3 from "./static/music.mp3"


function App() {
  const [wavesurfer, setWavesurfer] = useState(null);
  useEffect(() => {
    const colors = Colormap({
      colormap: "jet",
      nshades: 256,
      format: "float",
    });
    const wavesurferCave = WaveSurfer.create({
      container: '#pcmGraph',//容器
      waveColor: '#FF55C5',
      progressColor: '#00BFBF',
      split: false,
      minPxPerSec: 8,
      height: 128,
      // barWidth: 1,
      barHeight: 1.5,
      splitChannels: false,
      audioRate: '1',
      plugins: [
        SpectrogramPlugin.create({
          container: '#stftGraph',
          labels: true,
          colorMap: colors,
          fftSamples: 1024,
          height: 512,
          // frequencyMax:35000,
        }),
      ]
    });
    wavesurferCave.load(mp3)
    setWavesurfer(wavesurferCave);
    // wavesurfer.load(wav);
  }, []);
  function play (){
    wavesurfer.play();
  }
  function pause () {
    wavesurfer.pause();
  }

  return (
    <div class="container">
      <button onClick={play} id="play_btn">播放</button>
      <button onClick={pause} id="play_btn">暂停</button>
      <div class="pcmGraph_wrapper">
        <span class="wrapper_span">时域波纹图</span>
        <div id="pcmGraph"></div>
      </div>
      <div class="wrapper">
        <span class="wrapper_span">时频域声纹图</span>
        <div id="stftGraph"></div>
      </div>
      <div class="wrapper">
      </div>
    </div>
  );
}

export default App;
